

<%--
  Created by IntelliJ IDEA.
  User: xiaoziyan
  Date: 2022/2/15
  Time: 22:14
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<html lang="zh-CN">

<head>
    <meta charset="utf-8"/>
    <meta http-equiv="X-UA-Compatible" content="IE=edge"/>
    <meta name="viewport" content="width=device-width, initial-scale=1"/>
    <title>新增项目</title>

    <link rel="shortcut icon" href="../images/favicon.ico" type="image/x-icon">

    <!-- 1. 导入CSS的全局样式 -->
    <link href="${pageContext.request.contextPath}/css/bootstrap.css" rel="stylesheet">
    <link rel="stylesheet" href="${pageContext.request.contextPath}/layui/css/layui.css">
    <!-- 2. jQuery导入，建议使用1.9以上的版本 -->
    <script src="${pageContext.request.contextPath}/js/jquery-3.6.0.js"></script>
    <!-- 3. 导入bootstrap的js文件 -->
    <script src="${pageContext.request.contextPath}/js/bootstrap.js"></script>
    <script src="${pageContext.request.contextPath}/layui/layui.js" charset="utf-8"></script>
    <script type="text/javascript">

    </script>
    <style>
        #download {
            margin-top: 20px;
            margin-left: 25px;
            width: 350px;
        }


    </style>
</head>
<body>

<div class="layui-form-item">

</div>
<div class="container" style="width: 430px; margin-top: 5%">
    <h3 style="text-align: center;margin-bottom: 15px;font-size: 24px;font-weight: bold">生成节点二维码</h3>


    <form class="layui-form form-inline" action="">
        <div class="form-group">
            <label  style="margin-left: 29px">IMEI: </label>
            <input style="margin-left: 2px" type="text"  class="form-control" lay-verify="imei" id="IMEI"  placeholder="请输入IMEI"/>
            <button type="button" id="QRcode" class="btn btn btn-primary" lay-submit="" >生成二维码</button>
            <%--<input type="button" class="btn btn btn-primary" lay-submit="" value="生成二维码" >--%>
        </div>
        <hr/>
    </form>
    <img id="img" src="">
    <a id="download" class="btn btn btn-success">下载二维码</a>
</div>

<script type="text/javascript">
    //设置下载按钮隐藏
    $("#download").hide();
    /*layui设置*/
    layui.use(['layer'], function() {
        var layer = layui.layer
            , $ = layui.$
            ,form = layui.form;

        $("#QRcode").click(function () {
            //自定义验证规则
            form.verify({
                imei: function(value){
                    if(value.length == 0){
                        $("#img").attr('src','');
                        return 'IMEI不能为空';
                    }else if(value.length != 15)
                    {
                        $("#img").attr('src','');
                        return 'IMEI必须为15位';
                    }else {
                        /*查询节点是否存在*/
                        $.ajax({
                            url:"${pageContext.request.contextPath}/checkNodeServlet", //请求路径
                            type: "POST",
                            data:{"IMEI":value},
                            success:function (data) {
                                var nodeCheck = data;

                                if (nodeCheck=='true')
                                {
                                    /*设置img标签的src属性*/
                                    $("#img").attr('src','${pageContext.request.contextPath}/QRCodeUtil?IMEI='+value);
                                    $("#download").show();
                                    $("#download").click(function () {
                                        $("#download").attr('href','${pageContext.request.contextPath}/QRCodeUtil?IMEI='+value);
                                    });
                                }else {
                                    layer.msg('节点不存在');
                                    $("#download").hide();
                                    $("#img").attr('src','');
                                }
                            }
                        });

                    }
                }
            });

        });

    });


</script>


</body>
</html>

